<template>
  <div class="audio-main">
    <Slider
      :max="100"
      :min="0"
      :value="sliderValue"
      @sliderChange="changeSpeed"
      @skip="sliderSkip"
      class="song-slider"
    />
    <div style="margin-right: auto"></div>
    <svg-icon
      name="houtui"
      w="12px"
      h="12px"
      style="margin-right: 10px"
    ></svg-icon>

    <svg-icon
      name="zanting"
      w="12px"
      h="12px"
      v-if="isPlay"
      @click="stopAudio"
    ></svg-icon>
    <svg-icon
      name="play"
      w="12px"
      h="12px"
      v-else
      @click="playAudio"
    ></svg-icon>
    <svg-icon
      name="qianjin"
      w="12px"
      h="12px"
      style="margin-left: 10px"
    ></svg-icon>
    <div>
      <audio class="audio" hidden controls ref="audio" @ended.stop="audioEnded">
        <source src="../../assets/audio/惊鸿一面.mp3" type="audio/mpeg" />
      </audio>
    </div>
  </div>
</template>

<script>
import Slider from "../slider/index.vue"
import axios from "axios"
export default {
  props: {
    src: String
  },
  components: {
    Slider
  },
  data() {
    return {
      isPlay: false,
      duration: 0,
      currentTime: 0,
      sliderValue: 0,
      // 歌词解析部分
      Lrc: '',
      ms: [],
      song: '',
      singer: '',
    }
  },
  computed: {
    waveItem() {
      return new Array(30).fill('')
    },
    audio() {
      return this.$refs.audio
    },
    waveItems() {
      return document.getElementsByClassName('wave-item')
    },
    progressBar() {
      return this.$refs.progressBar
    },
  },
  watch: {
    sliderValue(val, old) {
      //   console.log(val)
    }
  },
  mounted() {
    let delay = 0
    for (const item of this.waveItems) {
      item.style.animationDelay = `${delay}s`
      delay = delay + 0.1
      if (delay === 0.5) delay = 0
      item.style.animationPlayState = 'paused'
    }
    setTimeout(() => {
      this.duration = Math.floor(this.audio.duration)
      const currentTime = Math.floor(this.audio.currentTime)
      this.sliderValue = (currentTime / this.duration) * 100
    }, 400)
    setInterval(() => {
      this.sliderValue = Math.floor((Math.floor(this.audio.currentTime) / this.duration) * 100)
      //   this.currentTime = Math.floor(this.audio.currentTime)
    }, 100)

    // 解析歌词
    this.getLrc()
  },
  methods: {
    playAudio() {
      this.isPlay = true
      // let audio = this.$refs.audio
      this.audio.play()
      for (const item of this.waveItems) {
        item.style.animationPlayState = 'running'
      }
    },
    stopAudio() {
      this.isPlay = false
      this.audio.pause()
      for (const item of this.waveItems) {
        item.style.animationPlayState = 'paused'
      }
    },
    audioEnded() {
      this.stopAudio()
    },
    getLrc() {
      axios.get(`../../assets/lrc/惊鸿一面-许嵩,黄龄.lrc`)
        .then(res => {
          console.log(res)
        })
      //this.Lrc是后端获取到的lrc格式的歌词文件
      if (this.Lrc.length == 0) return
      // var lyricstxt = []; //存放歌词
      var lrcs = this.Lrc.split('\n')//用回车拆分成数组
      console.log(lrcs)
      for (var i in lrcs) {//遍历歌词数组
        lrcs[i] = lrcs[i].replace(/(^\s*)|(\s*$)/g, "") //去除前后空格
        let t = lrcs[i].substring(lrcs[i].indexOf("[") + 1, lrcs[i].indexOf("]"))//取[]间的内容
        let s = t.split(":")//分离:前后文字
        if (!isNaN(parseInt(s[0]))) { //是数值
          var arr = lrcs[i].match(/\[(\d+:.+?)\]/g)//提取时间字段，可能有多个
          var start = 0
          for (let k in arr) {
            start += arr[k].length //计算歌词位置
          }
          var content = lrcs[i].substring(start)//获取歌词内容
          for (let k in arr) {
            let t = arr[k].substring(1, arr[k].length - 1)//取[]间的内容
            let s = t.split(":")//分离:前后文字
            this.ms.push({//对象{t:时间,c:歌词}加入ms数组
              t: (parseFloat(s[0]) * 60 + parseFloat(s[1])).toFixed(3),
              c: content
            })
          }
        }
      }
    },
    resize(e) {
      this.audio.currentTime = e.offsetX / this.progressBar.clientWidth * this.audio.duration
      this.stopAudio()
    },
    changeSpeed() {
      //   console.log(this.currentTime)
    },
    sliderSkip(val) {
      this.audio.play()
      this.isPlay = true
      this.audio.currentTime = val * this.duration

    }
  }
}
</script>

<style lang="less" scoped>
.song-slider {
  width: 75%;
}
.audio-main {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  .audio {
    position: absolute;
  }
  .wave {
    display: flex;
    position: relative;
    .wave-item {
      width: 3px;
      height: 12px;
      background: #4b73ec;
      border-radius: 1px;
      margin: 0 5px;
      animation: wave-anim 0.4s linear infinite alternate;
      transform-origin: center;
    }
    .resize-bar {
      width: 100%;
      height: 100%;
      // background: #1cdc7f2a;
      // border-radius: 5px;
      cursor: pointer;
      position: absolute;
      top: 0;
    }
  }
}
@keyframes wave-anim {
  to {
    transform: scaleY(2.5);
  }
}
</style>